<template>
  <view class="configPage">
    <!-- banner 位置 -->
    <view
      class="container"
      v-for="(bannerItems, bannerKey) in bannerItemsArr[footerBannerPosition].bannerContents"
      :key="bannerKey"
      :class="[filterChecked.showFooterBannerStyle(bannerItemsArr[footerBannerPosition].isRow)]"
    >
      <view v-if="bannerItems" v-for="(bannerItem, itemKey) in bannerItems" :key="itemKey">
        <!--解析CMS banner-->
        <!-- bannerHTML页面  -->
        <view
          v-if="bannerItem.type == 'banner'"
          :style="bannerItem.data.style"
          :class="[
            bannerItem.data.class == 'showGrid' ? (showGrid ? 'showGrid' : 'hideGrid') : bannerItem.data.class,
            bannerItem.data.class == 'showList' ? (showList ? 'showList' : 'hideList') : bannerItem.data.class,
            bannerItem.data.class == 'showshirt' ? (showTshirt ? 'showshirt' : 'hideshirt') : bannerItem.data.class
          ]"
          :id="bannerItem.data.id"
        >
          <!-- 第一层child  -->
          <block v-for="(firstbannerItem, firstbannerIndex) in bannerItem.data.child" :key="firstbannerIndex">
            <!-- tagType == 'img' -->
            <image
              class="animated fadeIn"
              v-if="firstbannerItem.tagType == 'img'"
              :mode="firstbannerItem.mode ? firstbannerItem.mode : modeStyle"
              :src="firstbannerItem.src"
              :class="firstbannerItem.class"
              :style="firstbannerItem.style"
            ></image>
            <!-- tagType == 'navigator' -->
            <navigator
              v-if="firstbannerItem.tagType == 'navigator'"
              :url="firstbannerItem.url"
              :style="firstbannerItem.style"
              :target="firstbannerItem.target"
              :class="firstbannerItem.class"
              hover-class="none"
            >
              <!-- 第二层child -->
              <block v-for="(secondbannerimageItem, secondbannerimageIndex) in firstbannerItem.child" :key="secondbannerimageIndex">
                <image
                  class="animated fadeIn"
                  v-if="secondbannerimageItem.tagType == 'img'"
                  :mode="secondbannerimageItem.mode ? secondbannerimageItem.mode : modeStyle"
                  :src="secondbannerimageItem.src"
                  :class="secondbannerimageItem.class"
                  :style="secondbannerimageItem.style"
                ></image>
                <view v-if="secondbannerimageItem.tagType == 'div'" :class="secondbannerimageItem.class" :style="secondbannerimageItem.style">
                  {{ secondbannerimageItem.text }}
                </view>
                <view v-if="secondbannerimageItem.tagType == 'label'" :class="secondbannerimageItem.class" :style="secondbannerimageItem.style">
                  {{ secondbannerimageItem.text }}
                </view>
              </block>
            </navigator>
            <!-- tagType == 'a' -->
            <navigator
              v-if="firstbannerItem.tagType == 'a'"
              :url="firstbannerItem.href"
              :target="firstbannerItem.target"
              :style="firstbannerItem.style"
              :class="firstbannerItem.class"
              hover-class="none"
            >
              <!-- 第二层child -->
              <block v-if="firstbannerItem.text">{{ firstbannerItem.text }}</block>
              <block v-for="(secondbannerItem, secondbannerIndex) in firstbannerItem.child" :key="secondbannerIndex">
                <image
                  class="animated fadeIn"
                  v-if="secondbannerItem.tagType == 'img'"
                  :mode="secondbannerItem.mode ? secondbannerItem.mode : modeStyle"
                  :src="secondbannerItem.src"
                  :class="secondbannerItem.class"
                  :style="secondbannerItem.style"
                ></image>
                <h2 v-if="secondbannerItem.tagType == 'h2'" :class="secondbannerItem.class" :style="secondbannerItem.style">{{ secondbannerItem.text }}</h2>
              </block>
            </navigator>
            <!-- tagType == 'div' -->
            <view
              @click="cmsClickHandle"
              :data-handle="firstbannerItem.onclick"
              :data-text="firstbannerItem.text"
              v-if="firstbannerItem.tagType == 'div'"
              :class="[
                firstbannerItem.class == 'showGrid' ? (showGrid ? 'showGrid' : 'hideGrid') : firstbannerItem.class,
                firstbannerItem.class == 'showList' ? (showList ? 'showList' : 'hideList') : firstbannerItem.class,
                tabName == firstbannerItem.text ? 'active' : ''
              ]"
              :style="firstbannerItem.style"
            >
              <block v-if="firstbannerItem.text">{{ firstbannerItem.text }}</block>
              <!-- 第二层child -->
              <block v-for="(secondbannerItem, secondbannerIndex) in firstbannerItem.child" :key="secondbannerIndex">
                <h2 v-if="secondbannerItem.tagType == 'h2'" :class="secondbannerItem.class" :style="secondbannerItem.style">{{ secondbannerItem.text }}</h2>
                <p
                  v-if="secondbannerItem.tagType == 'p'"
                  @click="cmsClickHandle"
                  :data-handle="secondbannerItem.onclick"
                  :data-text="secondbannerItem.text"
                  :style="secondbannerItem.style"
                  :class="secondbannerItem.class"
                >
                  {{ secondbannerItem.text }}
                </p>
                <label v-if="secondbannerItem.tagType == 'label'" :class="secondbannerItem.class" :style="secondbannerItem.style">{{ secondbannerItem.text }}</label>
                <span
                  v-if="secondbannerItem.tagType == 'span'"
                  @click="cmsClickHandle"
                  :data-handle="secondbannerItem.onclick"
                  :data-text="secondbannerItem.text"
                  :class="secondbannerItem.class"
                  :style="secondbannerItem.style"
                >
                  {{ secondbannerItem.text }}
                </span>
                <image
                  class="animated fadeIn"
                  v-if="secondbannerItem.tagType == 'img'"
                  :mode="secondbannerItem.mode ? secondbannerItem.mode : modeStyle"
                  :src="secondbannerItem.src"
                  :class="secondbannerItem.class"
                  :style="secondbannerItem.style"
                ></image>
                <!-- a和里面的child -->
                <navigator
                  v-if="secondbannerItem.tagType == 'a'"
                  :url="secondbannerItem.href"
                  :target="secondbannerItem.target"
                  :class="secondbannerItem.class"
                  :style="secondbannerItem.style"
                  hover-class="none"
                >
                  <block>{{ secondbannerItem.text }}</block>
                  <block v-for="(thirdbannerItem, thirdbannerIndex) in secondbannerItem.child" :key="thirdbannerIndex">
                    <image
                      class="animated fadeIn"
                      v-if="thirdbannerItem.tagType == 'img'"
                      :mode="thirdbannerItem.mode ? thirdbannerItem.mode : modeStyle"
                      :src="thirdbannerItem.src"
                      :class="thirdbannerItem.class"
                      :style="thirdbannerItem.style"
                    ></image>
                  </block>
                </navigator>
                <!-- 第三层child div里面的div-->
                <view
                  v-if="secondbannerItem.tagType == 'div'"
                  @click="cmsClickHandle"
                  :data-handle="secondbannerItem.onclick"
                  :data-text="secondbannerItem.text"
                  :class="secondbannerItem.class"
                  :style="secondbannerItem.style"
                >
                  <block v-if="secondbannerItem.text">{{ secondbannerItem.text }}</block>
                  <block v-for="(thirdbannerItem, thirdbannerIndex) in secondbannerItem.child" :key="thirdbannerIndex">
                    <navigator
                      v-if="thirdbannerItem.tagType == 'a'"
                      :url="thirdbannerItem.href"
                      :target="thirdbannerItem.target"
                      :class="thirdbannerItem.class"
                      :style="thirdbannerItem.style"
                      hover-class="none"
                    >
                      <block v-if="thirdbannerItem.text">{{ thirdbannerItem.text }}</block>

                      <block v-for="(fourthbannerItem, fourthbannerIndex) in thirdbannerItem.child" :key="fourthbannerIndex">
                        <image
                          class="animated fadeIn"
                          v-if="fourthbannerItem.tagType == 'img'"
                          :mode="fourthbannerItem.mode ? fourthbannerItem.mode : modeStyle"
                          :src="fourthbannerItem.src"
                          :class="fourthbannerItem.class"
                          :style="fourthbannerItem.style"
                        ></image>
                      </block>
                    </navigator>
                    <h2 v-if="thirdbannerItem.tagType == 'h2'" :class="thirdbannerItem.class" :style="thirdbannerItem.style">{{ thirdbannerItem.text }}</h2>
                    <p
                      v-if="thirdbannerItem.tagType == 'p'"
                      @click="cmsClickHandle"
                      :data-handle="thirdbannerItem.onclick"
                      :data-text="thirdbannerItem.text"
                      :style="thirdbannerItem.style"
                      :class="thirdbannerItem.class"
                    >
                      {{ thirdbannerItem.text }}
                    </p>
                    <label v-if="thirdbannerItem.tagType == 'label'" :class="thirdbannerItem.class" :style="thirdbannerItem.style">{{ thirdbannerItem.text }}</label>
                    <span
                      v-if="thirdbannerItem.tagType == 'span'"
                      @click="cmsClickHandle"
                      :data-handle="thirdbannerItem.onclick"
                      :data-text="thirdbannerItem.text"
                      :class="thirdbannerItem.class"
                      :style="thirdbannerItem.style"
                    >
                      {{ thirdbannerItem.text }}
                    </span>
                    <image
                      v-if="thirdbannerItem.tagType == 'img'"
                      :mode="thirdbannerItem.mode ? thirdbannerItem.mode : modeStyle"
                      :src="thirdbannerItem.src"
                      :class="thirdbannerItem.class"
                      :style="thirdbannerItem.style"
                    ></image>

                    <!-- 第四层循环 tagType == 'div'-->
                    <view v-if="thirdbannerItem.tagType == 'div'" :class="thirdbannerItem.class" :style="thirdbannerItem.style">
                      <block v-if="thirdbannerItem.text">{{ thirdbannerItem.text }}</block>
                      <block v-for="(fourthbannerItem, fourthbannerIndex) in thirdbannerItem.child" :key="fourthbannerIndex">
                        <navigator
                          class="animated fadeInRight"
                          v-if="fourthbannerItem.tagType == 'a'"
                          :url="fourthbannerItem.href"
                          :target="fourthbannerItem.target"
                          :class="fourthbannerItem.class"
                          :style="fourthbannerItem.style"
                          hover-class="none"
                        >
                          <block v-if="fourthbannerItem.text">{{ fourthbannerItem.text }}</block>

                          <block v-for="(fifthbannerItem, fifthbannerIndex) in fourthbannerItem.child" :key="fifthbannerIndex">
                            <image
                              v-if="fifthbannerItem.tagType == 'img'"
                              :mode="fifthbannerItem.mode ? fifthbannerItem.mode : modeStyle"
                              :src="fifthbannerItem.src"
                              :class="fifthbannerItem.class"
                              :style="fifthbannerItem.style"
                            ></image>
                          </block>
                        </navigator>
                        <h2 v-if="fourthbannerItem.tagType == 'h2'" :style="fourthbannerItem.style" :class="fourthbannerItem.class">{{ fourthbannerItem.text }}</h2>
                        <p v-if="fourthbannerItem.tagType == 'p'" :style="fourthbannerItem.style" :class="fourthbannerItem.class">{{ fourthbannerItem.text }}</p>
                        <!-- 第五层循环 tagType == 'div'-->
                        <view v-if="fourthbannerItem.tagType == 'div'" :class="fourthbannerItem.class" :style="fourthbannerItem.style">
                          <block v-if="fourthbannerItem.text">{{ fourthbannerItem.text }}</block>
                          <block v-for="(fifthbannerItem, fifthbannerIndex) in fourthbannerItem.child" :key="fifthbannerIndex">
                            <navigator
                              v-if="fifthbannerItem.tagType == 'a'"
                              :url="fifthbannerItem.href"
                              :target="fifthbannerItem.target"
                              :class="fifthbannerItem.class"
                              :style="fifthbannerItem.style"
                              hover-class="none"
                            >
                              <block v-if="fifthbannerItem.text">{{ fifthbannerItem.text }}</block>

                              <block v-for="(sixthbannerItem, sixthbannerIndex) in fifthbannerItem.child" :key="sixthbannerIndex">
                                <image
                                  class="animated fadeIn"
                                  v-if="sixthbannerItem.tagType == 'img'"
                                  :mode="sixthbannerItem.mode ? sixthbannerItem.mode : modeStyle"
                                  :src="sixthbannerItem.src"
                                  :class="sixthbannerItem.class"
                                  :style="sixthbannerItem.style"
                                ></image>
                              </block>
                            </navigator>
                            <image
                              class="animated fadeIn"
                              v-if="fifthbannerItem.tagType == 'img'"
                              :mode="fifthbannerItem.mode ? fifthbannerItem.mode : modeStyle"
                              :src="fifthbannerItem.src"
                              :class="fifthbannerItem.class"
                              :style="fifthbannerItem.style"
                            ></image>
                            <h2 v-if="fifthbannerItem.tagType == 'h2'" :style="fifthbannerItem.style" :class="fifthbannerItem.class">{{ fifthbannerItem.text }}</h2>
                            <p v-if="fifthbannerItem.tagType == 'p'" :style="fifthbannerItem.style" :class="fifthbannerItem.class">{{ fifthbannerItem.text }}</p>
                          </block>
                        </view>
                      </block>
                    </view>
                  </block>
                </view>
              </block>
            </view>

            <!-- tagType == 'h2' -->
            <view
              v-if="firstbannerItem.tagType == 'h2' || firstbannerItem.tagType == 'h1' || firstbannerItem.tagType == 'h3'"
              :class="firstbannerItem.class"
              :style="firstbannerItem.style"
            >
              <block v-if="firstbannerItem.text">{{ firstbannerItem.text }}</block>
            </view>

            <!-- tagType == 'p' -->
            <view
              @click="cmsClickHandle"
              :data-handle="firstbannerItem.onclick"
              :data-text="firstbannerItem.text"
              v-if="firstbannerItem.tagType == 'p'"
              :class="firstbannerItem.class"
              :style="firstbannerItem.style"
            >
              <block v-if="firstbannerItem.text">{{ firstbannerItem.text }}</block>
              <block v-for="(secondbannerItem, secondbannerIndex) in firstbannerItem.child" :key="secondbannerIndex">
                <navigator
                  v-if="secondbannerItem.tagType == 'a'"
                  :url="secondbannerItem.href"
                  :target="secondbannerItem.target"
                  :class="secondbannerItem.class"
                  :style="secondbannerItem.style"
                  hover-class="none"
                >
                  {{ secondbannerItem.text }}
                </navigator>
                <view v-if="secondbannerItem.tagType == 'strong'" :class="secondbannerItem.class" :style="secondbannerItem.style">{{ secondbannerItem.text }}</view>
              </block>
            </view>
          </block>
        </view>

        <!-- type == 'line' -->
        <view v-if="bannerItem.type == 'line'" :id="bannerItem.data.id" :class="bannerItem.data.class" :style="bannerItem.data.style"></view>

        <!-- slideHTML页面  默认scroll-x scroll-y 手动添加 -->
        <view v-if="bannerItem.type == 'slide'" :class="bannerItem.data.class" :style="bannerItem.data.style">
          <!-- 第一层循环 -->
          <block v-for="(firstbannerItem, firstbannerIndex) in bannerItem.data.child" :key="firstbannerIndex">
            <scroll-view v-if="firstbannerItem.tagType == 'scroll-view'" scroll-x="true" :class="firstbannerItem.class" :style="firstbannerItem.style">
              <!-- 第二层循环 -->
              <block v-for="(secondsliderChildItem, secondsliderChildIndex) in firstbannerItem.child" :key="secondsliderChildIndex">
                <view v-if="secondsliderChildItem.tagType == 'div'" :class="secondsliderChildItem.class" :style="secondsliderChildItem.style">
                  <block v-if="secondsliderChildItem.text">{{ secondsliderChildItem.text }}</block>
                  <!-- 第三层循环 tagType == 'div'-->
                  <block v-for="(thirdsliderChildItems, thirdsliderChildIndexs) in secondsliderChildItem.child" :key="thirdsliderChildIndexs">
                    <image
                      v-if="thirdsliderChildItems.tagType == 'img'"
                      :mode="thirdsliderChildItems.mode ? thirdsliderChildItems.mode : modeStyle"
                      :src="thirdsliderChildItems.src"
                      :style="thirdsliderChildItems.style"
                      :class="thirdsliderChildItems.class"
                    ></image>

                    <navigator
                      v-if="thirdsliderChildItems.tagType == 'a'"
                      :style="thirdsliderChildItems.style"
                      :url="thirdsliderChildItems.href"
                      :target="thirdsliderChildItems.target"
                      :class="thirdsliderChildItems.class"
                      hover-class="none"
                    >
                      <block v-if="thirdsliderChildItems.text">{{ thirdsliderChildItems.text }}</block>

                      <!-- 第四层循环 tagType == 'a'-->
                      <block v-for="(fourthsliderChildItems, fourthsliderChildIndexs) in thirdsliderChildItems.child" :key="fourthsliderChildIndexs">
                        <image
                          v-if="fourthsliderChildItems.tagType == 'img'"
                          :mode="fourthsliderChildItems.mode ? fourthsliderChildItems.mode : modeStyle"
                          :src="fourthsliderChildItems.src"
                          :style="fourthsliderChildItems.style"
                          :class="fourthsliderChildItems.class"
                        ></image>
                      </block>
                    </navigator>

                    <view v-if="thirdsliderChildItems.tagType == 'div'" :class="thirdsliderChildItems.class">
                      <block v-if="thirdsliderChildItems.text">{{ thirdsliderChildItems.text }}</block>
                      <!-- 第四层循环 tagType == 'div'-->
                      <block v-for="(fourthsliderChildItems, fourthsliderChildIndex) in thirdsliderChildItems.child" :key="fourthsliderChildIndex">
                        <h2 v-if="fourthsliderChildItems.tagType == 'h2'" :style="fourthsliderChildItems.style" :class="fourthsliderChildItems.class">
                          {{ fourthsliderChildItems.text }}
                        </h2>
                        <p v-if="fourthsliderChildItems.tagType == 'p'" :style="fourthsliderChildItems.style" :class="fourthsliderChildItems.class">
                          {{ fourthsliderChildItems.text }}
                        </p>
                        <navigator
                          v-if="fourthsliderChildItems.tagType == 'a'"
                          :url="fourthsliderChildItems.href"
                          :style="fourthsliderChildItems.style"
                          :class="fourthsliderChildItems.class"
                          hover-class="none"
                        >
                          <block v-if="fourthsliderChildItems.text">{{ fourthsliderChildItems.text }}</block>
                          <!-- 第五层循环 tagType == 'a'-->
                          <block v-for="(fifthsliderChildItems, fifthsliderChildIndexs) in fourthsliderChildItems.child" :key="fifthsliderChildIndexs">
                            <image
                              v-if="fifthsliderChildItems.tagType == 'img'"
                              :mode="fifthsliderChildItems.mode ? fifthsliderChildItems.mode : modeStyle"
                              :src="fifthsliderChildItems.src"
                              :style="fifthsliderChildItems.style"
                              :class="fifthsliderChildItems.class"
                            ></image>
                          </block>
                        </navigator>
                        <view v-if="fourthsliderChildItems.tagType == 'div'" :class="fourthsliderChildItems.class" :style="fourthsliderChildItems.style">
                          <block v-if="fourthsliderChildItems.text">{{ fourthsliderChildItems.text }}</block>
                          <!-- 第五层循环 -->
                          <block v-for="(fifthsliderChildItems, fifthsliderChildIndexs) in fourthsliderChildItems.child" :key="fifthsliderChildIndexs">
                            <navigator
                              v-if="fifthsliderChildItems.tagType == 'a'"
                              :url="fifthsliderChildItems.href"
                              :target="fifthsliderChildItems.target"
                              :class="fifthsliderChildItems.class"
                              :style="fifthsliderChildItems.style"
                              hover-class="none"
                            >
                              <block v-if="fifthsliderChildItems.text">{{ fifthsliderChildItems.text }}</block>
                              <!-- 第六层循环 tagType == 'a'-->
                              <block v-for="(sixthsliderChildItems, sixthsliderChildIndexs) in fifthsliderChildItems.child" :key="sixthsliderChildIndexs">
                                <image
                                  v-if="sixthsliderChildItems.tagType == 'img'"
                                  :mode="sixthsliderChildItems.mode ? sixthsliderChildItems.mode : modeStyle"
                                  :src="sixthsliderChildItems.src"
                                  :style="sixthsliderChildItems.style"
                                  :class="sixthsliderChildItems.class"
                                ></image>
                              </block>
                            </navigator>
                          </block>
                        </view>
                      </block>
                    </view>
                  </block>
                </view>
              </block>
            </scroll-view>
          </block>
        </view>

        <!-- lp页面 -->
        <view v-if="bannerItem.type == 'lp'" :style="bannerItem.data.style" :class="bannerItem.data.class">
          <!-- 第一层循环 -->
          <block v-for="(firstlpItem, firstlpIndex) in bannerItem.data.child" :key="firstlpIndex">
            <scroll-view v-if="firstlpItem.tagType == 'scroll-view'" :style="firstlpItem.style" scroll-x="firstlpItem.scroll-x" :class="firstlpItem.class">
              <!-- 第二层循环 -->
              <block v-for="(secondlpItem, secondlpIndex) in firstlpItem.child" :key="secondlpIndex">
                <view v-if="secondlpItem.tagType == 'div'" :class="secondlpItem.class" :style="secondlpItem.style">
                  <!-- 第三层循环 -->
                  <block v-for="(thirdlpItems, thirdlpIndexs) in secondlpItem.child" :key="thirdlpIndexs">
                    <navigator
                      v-if="thirdlpItems.tagType == 'a'"
                      :style="thirdlpItems.style"
                      :url="thirdlpItems.href"
                      :target="thirdlpItems.target"
                      :class="thirdlpItems.class"
                      hover-class="none"
                    >
                      <!-- 第四层循环 -->
                      <block v-for="(fourthlpItems, fourthlpIndexs) in thirdlpItems.child" :key="fourthlpIndexs">
                        <image
                          v-if="fourthlpItems.tagType == 'img'"
                          :mode="fourthlpItems.mode ? fourthlpItems.mode : modeStyle"
                          :src="fourthlpItems.src"
                          :style="fourthlpItems.style"
                          :class="fourthlpItems.class"
                        ></image>
                      </block>
                    </navigator>
                    <view v-if="thirdlpItems.tagType == 'div'" :class="thirdlpItems.class">
                      <!-- 第四层循环 -->
                      <block v-for="(fourthlpItems, fourthlpIndex) in thirdlpItems.child" :key="fourthlpIndex">
                        <h2 v-if="fourthlpItems.tagType == 'h2'" :style="fourthlpItems.style" :class="fourthlpItems.class">{{ fourthlpItems.text }}</h2>
                        <p v-if="fourthlpItems.tagType == 'p'" :style="fourthlpItems.style" :class="fourthlpItems.class">{{ fourthlpItems.text }}</p>
                        <view v-if="fourthlpItems.tagType == 'div'" :class="fourthlpItems.class" :style="fourthlpItems.style">
                          <!-- 第五层循环 -->
                          <block v-for="(fifthlpItems, fifthlpIndexs) in fourthlpItems.child" :key="fifthlpIndexs">
                            <navigator
                              v-if="fifthlpItems.tagType == 'a'"
                              :url="fifthlpItems.href"
                              :target="fifthlpItems.target"
                              :class="fifthlpItems.class"
                              :style="fifthlpItems.style"
                              hover-class="none"
                            >
                              {{ fifthlpItems.text }}
                            </navigator>
                          </block>
                          <!-- 第五层循环 end -->
                        </view>
                      </block>
                      <!-- 第四层循环 end -->
                    </view>
                  </block>
                </view>
              </block>
            </scroll-view>
          </block>
          <!-- 第一层循环 end -->
        </view>
      </view>
    </view>
  </view>
</template>

<script module="filterChecked" lang="wxs" src="../../utils/filter.wxs"></script>
<script>
import Vue from 'vue';
import api from '@/api/api';
import tip from '@/utils/tip';
import cmsItems from '@/utils/cmsItems';
import customize from '@/utils/customize';
import { SEL_CLASS_CODE, SEL_ACTIVE_CODE, SYSTEM_INFO, CUSTOMER_INFO, CART_KEY, MERCHANT_INFO, USER_INFO, USER_SPECICAL_INFO } from '@/utils/constant';

export default {
  config: {
    component: true
  },
  props: {
    bannerItemsArr: [],
    footerBannerPosition: String
  },
  data() {
    return {
      modeStyle: 'widthFix'
    };
  },
  created: async function(option) {
    let that = this;
  }
};
</script>

<style lang="less" scoped>
image {
  height: auto;
}
</style>
